<template>
  <div class="navbar">
    <div class="headerBox">
      <div class="headerBoxa">
        <div class="headerBoxs">
          <img
            style="width: 40px; height: 40px; border-radius: 50%"
            src="/image/logo.png"
          />
          <!-- logo -->
        </div>
        <div class="navList">
          <div
            class="navItem"
            v-for="(item, index) in navList"
            :key="index"
            @click="chooseNav(index)"
          >
            <div
              class="navName"
              :class="[navCurrent == index ? 'activeNav' : '']"
            >
              {{ item }}
            </div>
            <div class="underLine" v-if="navCurrent == index"></div>
          </div>
        </div>
        <div class="messageBox">
          <el-button size="small" round @click="open">点击反馈</el-button>
          <div class="loginBox" v-if="IsToken == ''">
            <span @click="zhuce">注册</span>
            <span style="margin: 0 8px">|</span>
            <span @click="login">登录</span>
          </div>
          <div class="loginMsg" v-else>
            <img class="login_logo" :src="`${$http}${userData.avatar}`" />
            <span
              style="
                font-size: 16px;
                color: rgba(17, 17, 17, 1);
                margin: 0 10px;
              "
              >{{ userData.email }}</span
            >
            <span @click="quit" style="cursor: pointer">退出</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "myHeader",
  components: {},
  data() {
    return {
      navList: ["首页", "热点", "个人中心"],
      // navList: [{
      //     id:1,
      //     title:"首页",
      //     path:'/home'
      // }],
      navCurrent: 0,
      IsPicker: false,
      IsToken: "",
      userData: {},
      showflag: false,
      inpvalue: "",
    };
  },
  mounted() {
    setTimeout(() => {
      this.IsToken = localStorage.getItem("token");
      let userId = localStorage.getItem("USERID");
      console.log(userId, "userId");
      this.$request.requserinfo(userId).then((res) => {
        this.userData = res.data || {};
      });
    }, 500);
  },
  methods: {
    // 用户信息
    async userHotlist(userId) {
      let result = await this.$request.requserinfo(userId);
      this.userData = result.data;
      console.log(this.userData.email, "1111111111");
    },
    chooseNav(e) {
      console.log(e, "Nav");
      this.navCurrent = e;
      if (e == 0) return this.$router.push("/home");
      if (e == 1) return this.$router.push("/hotSpot");
      if (e == 2) return this.$router.push("/mine");
    },
    picker() {
      this.IsPicker = !this.IsPicker;
    },
    zhuce() {
      this.$router.push("/registered");
    },
    login() {
      this.$router.push("/login");
    },
    quit() {
      this.$router.replace("/login");
      localStorage.clear(); //删除所有数据
    },
    // 点击反馈
    changeKus() {
      this.showflag = true;
    },
    open() {
      this.$prompt("请输入反馈信息", "", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(({ value }) => {
          if (value != null) {
            let params = {
              feedback: value,
              userId: localStorage.getItem("USERID"),
            };
            this.$request.feedbackadd(params).then((res) => {
              if (res.code == 200) {
                this.$message.success(res.msg);
              } else {
                this.$message.error(res.msg);
              }
            });
          } else {
            this.$message.error("请输入");
          }
        })
        .catch(() => {
          this.$message.info("取消输入");
        });
    },
  },
};
</script>

<style>
.navbar {
  width: 100%;
  background-color: #f5f5f5;
  position: fixed;
  top: 0;
  z-index: 999;
}

.headerBox {
  width: 1200px;
  height: 50px;
  margin: 0 auto;
  padding-right: 24px;
  border-bottom: 2px solid #dedede;
}

.headerBoxa {
  width: 1200px;
  height: 50px;
  position: fixed;
  display: flex;
  align-items: center;
  /* background-color: #fff; */
}

.logoBox {
  width: 166px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.navList {
  height: 50px;
  display: flex;
  align-items: center;
  line-height: 50px;
}

.navItem {
  width: 100px;
  height: 100%;
  cursor: pointer;
  /* 变成手 */
  position: relative;
  margin-left: 48px;
}

.navName {
  color: rgba(17, 17, 17, 1);
  font-size: 16px;
  font-weight: 500;
  text-align: center;
}

.underLine {
  width: 84px;
  height: 3px;
  opacity: 1;
  background: #ff8b1a;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.activeNav {
  color: #ff8b1a;
}

.messageBox {
  margin-left: auto;
  display: flex;
}

.loginBox {
  color: #ff8b1a;
  font-size: 16px;
  cursor: pointer;
  /* 变成手 */
}

.loginMsg {
  display: flex;
  align-items: center;
}

.login_logo {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
}
</style>
